<!DOCTYPE html>
<html>

<head>
    <meta name="layout" content="main2" charset="utf-8" />
    <asset:javascript src="echarts.min.js" />
    <title>仪表板</title>
    <style>
    </style>
</head>

<body>
    <div id="one" style="width: 100%; height: 1600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var labelCenter = {
            normal: {
                show: true,
                position: 'center',
                formatter: '{b} \n {c} ({d}%)'
            },
        };
        var labelHidden = {
            normal: {
                show: false,
                position: 'center'
            },
        };
        var labelLineS = {
            normal: {
                show: true,
            },
        };
        var chartOne = echarts.init(document.getElementById('one'));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '预约、任务和商机统计'
            },
            //backgroundColor: '#1b1b1b',
            tooltip: {},
            // legend: {
            //     orient: 'vertical',
            //     x: 'left',
            //     bottom: '25%',
            //     data: ['跟进中', '已成功', '已失败']
            // },

            series: [{
//                center : ['50%', '50%'],
                name: '本日预约',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['10%', '9%'],
                data: [],
            }, {
                name: '本周预约',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['26%', '9%'],
                data: []
            }, {
                name: '本月预约',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['42%', '9%'],
                data: []
            }, {
                name: '本季预约',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['58%', '9%'],
                data: []
            }, {
                name: '本年预约',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['74%', '9%'],
                data: []
            }, {
                name: '本日任务',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['10%', '23%'],
                data: []
            }, {
                name: '本周任务',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['26%', '23%'],
                data: []
            }, {
                name: '本月任务',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['42%', '23%'],
                data: []
            }, {
                name: '本季任务',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['58%', '23%'],
                data: []
            }, {
                name: '本年任务',
                type: 'pie',
                radius: ['13%', '10%'],
                center: ['74%', '23%'],
                data: []
            }, {
                name: '本周已成功商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['20%', '37%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已成功',
                //         x: '20%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本周跟进中商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['42%', '37%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '跟进中',
                //         x: '42%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本周已失败商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['64%', '37%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已失败',
                //         x: '62%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本月已成功商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['20%', '52%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已成功',
                //         x: '20%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本月跟进中商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['42%', '52%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '跟进中',
                //         x: '42%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本月已失败商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['64%', '52%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已失败',
                //         x: '62%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本季已成功商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['20%', '67%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已成功',
                //         x: '20%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本季跟进中商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['42%', '67%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '跟进中',
                //         x: '42%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本季已失败商机',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['64%', '67%'],
                data: [],
                // markPoint: {
                //     symbol: 'circle',
                //     label: {
                //         normal: {
                //             show: true,
                //             formatter: '{b}'
                //         }
                //     },
                //     itemStyle: {},
                //     data: [{
                //         name: '已失败',
                //         x: '62%',
                //         y: '92%'
                //     }],
                // }
            }, {
                name: '本周合同',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['20%', '85%'],
                data: [],
                markPoint: {
                    symbol: 'circle',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {},
                    data: [{
                        name: '本周合同',
                        x: '20%',
                        y: '95%'
                    }],
                }
            }, {
                name: '本月合同',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['42%', '85%'],
                data: [],
                markPoint: {
                    symbol: 'circle',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {},
                    data: [{
                        name: '本月合同',
                        x: '42%',
                        y: '95%'
                    }],
                }
            }, {
                name: '本季合同',
                type: 'pie',
                radius: ['14%', '11%'],
                center: ['64%', '85%'],
                data: [],
                markPoint: {
                    symbol: 'circle',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{b}'
                        }
                    },
                    itemStyle: {},
                    data: [{
                        name: '本季合同',
                        x: '64%',
                        y: '95%'
                    }],
                }
            }, ]
        };

        // 使用刚指定的配置项和数据显示图表。
        chartOne.setOption(option1);

        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "/salesDashboard/loadIndexData",
            dataType: "json", //返回数据形式为json

            success: function(result) {

                chartOne.hideLoading(); //隐藏加载动画
                chartOne.setOption({ //渲染数据
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '本日预约',
                        data: [{
                            value: result.amount[0],
                            name: '本日已完成预约',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[1],
                            name: '本日未完成预约',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周预约',
                        data: [{
                            value: result.amount[2],
                            name: '本周已完成预约',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[3],
                            name: '本周未完成预约',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月预约',
                        data: [{
                            value: result.amount[4],
                            name: '本月已完成预约',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[5],
                            name: '本月未完成预约',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季预约',
                        data: [{
                            value: result.amount[6],
                            name: '本季已完成预约',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[7],
                            name: '本季未完成预约',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本年预约',
                        data: [{
                            value: result.amount[8],
                            name: '本年已完成预约',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[9],
                            name: '本年未完成预约',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本日任务',
                        data: [{
                            value: result.amount[10],
                            name: '本日已完成任务',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[11],
                            name: '本日未完成任务',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周任务',
                        data: [{
                            value: result.amount[12],
                            name: '本周已完成任务',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[13],
                            name: '本周未完成任务',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月任务',
                        data: [{
                            value: result.amount[14],
                            name: '本月已完成任务',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[15],
                            name: '本月未完成任务',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季任务',
                        data: [{
                            value: result.amount[16],
                            name: '本季已完成任务',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[17],
                            name: '本季未完成任务',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本年任务',
                        data: [{
                            value: result.amount[18],
                            name: '本年已完成任务',
                            label: labelCenter,
                            labelLine: labelLineS
                        }, {
                            value: result.amount[19],
                            name: '本年未完成任务',
                            label: labelHidden
                        }]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周商机',
                        data: [

                                {value:result.amount2[1],name:'本周已成功商机-已入围',label:labelHidden},
                                {value:result.amount2[4],name:'本周已成功商机-需求分析',label:labelHidden},
                                {value:result.amount2[13],name:'本周已成功商机-接近成功',label:labelCenter},
                                {value:result.amount2[7],name:'本周已成功商机-解决方案',label:labelHidden},
                                {value:result.amount2[10],name:'本周已成功商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周跟进中商机',
                        data: [

                                {value:result.amount2[0],name:'本周跟进中商机-已入围',label:labelHidden},
                                {value:result.amount2[3],name:'本周跟进中商机-需求分析',label:labelHidden},
                                {value:result.amount2[12],name:'本周跟进中商机-接近成功',label:labelCenter},
                                {value:result.amount2[6],name:'本周跟进中商机-解决方案',label:labelHidden},
                                {value:result.amount2[9],name:'本周跟进中商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周已失败商机',
                        data: [

                                {value:result.amount2[2],name:'本周已失败商机-已入围',label:labelHidden},
                                {value:result.amount2[5],name:'本周已失败商机-需求分析',label:labelHidden},
                                {value:result.amount2[14],name:'本周已失败商机-接近成功',label:labelCenter},
                                {value:result.amount2[8],name:'本周已失败商机-解决方案',label:labelHidden},
                                {value:result.amount2[11],name:'本周已失败商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月已成功商机',
                        data: [

                                {value:result.amount3[1],name:'本月已成功商机-已入围',label:labelHidden},
                                {value:result.amount3[4],name:'本月已成功商机-需求分析',label:labelHidden},
                                {value:result.amount3[13],name:'本月已成功商机-接近成功',label:labelCenter},
                                {value:result.amount3[7],name:'本月已成功商机-解决方案',label:labelHidden},
                                {value:result.amount3[10],name:'本月已成功商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月跟进中商机',
                        data: [

                                {value:result.amount3[0],name:'本月跟进中商机-已入围',label:labelHidden},
                                {value:result.amount3[3],name:'本月跟进中商机-需求分析',label:labelHidden},
                                {value:result.amount3[12],name:'本月跟进中商机-接近成功',label:labelCenter},
                                {value:result.amount3[6],name:'本月跟进中商机-解决方案',label:labelHidden},
                                {value:result.amount3[9],name:'本月跟进中商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月已失败商机',
                        data: [

                                {value:result.amount3[2],name:'本月已失败商机-已入围',label:labelHidden},
                                {value:result.amount3[5],name:'本月已失败商机-需求分析',label:labelHidden},
                                {value:result.amount3[14],name:'本月已失败商机-接近成功',label:labelCenter},
                                {value:result.amount3[8],name:'本月已失败商机-解决方案',label:labelHidden},
                                {value:result.amount3[11],name:'本月已失败商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季已成功商机',
                        data: [

                                {value:result.amount4[1],name:'本季已成功商机-已入围',label:labelHidden},
                                {value:result.amount4[4],name:'本季已成功商机-需求分析',label:labelHidden},
                                {value:result.amount4[13],name:'本季已成功商机-接近成功',label:labelCenter},
                                {value:result.amount4[7],name:'本季已成功商机-解决方案',label:labelHidden},
                                {value:result.amount4[10],name:'本季已成功商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季跟进中商机',
                        data: [

                                {value:result.amount4[0],name:'本季跟进中商机-已入围',label:labelHidden},
                                {value:result.amount4[3],name:'本季跟进中商机-需求分析',label:labelHidden},
                                {value:result.amount4[12],name:'本季跟进中商机-接近成功',label:labelCenter},
                                {value:result.amount4[6],name:'本季跟进中商机-解决方案',label:labelHidden},
                                {value:result.amount4[9],name:'本季跟进中商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季已失败商机',
                        data: [

                                {value:result.amount4[2],name:'本季已失败商机-已入围',label:labelHidden},
                                {value:result.amount4[5],name:'本季已失败商机-需求分析',label:labelHidden},
                                {value:result.amount4[14],name:'本季已失败商机-接近成功',label:labelCenter},
                                {value:result.amount4[8],name:'本季已失败商机-解决方案',label:labelHidden},
                                {value:result.amount4[11],name:'本季已失败商机-谈判',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本周合同',
                        data: [

                                {value:result.amount5[0],name:'本周合同-已签订合同',label:labelHidden},
                                {value:result.amount5[1],name:'本周合同-已发货',label:labelHidden},
                                {value:result.amount5[2],name:'本周合同-已验收',label:labelCenter},
                                {value:result.amount5[3],name:'本周合同-已付款',label:labelHidden},
                                {value:result.amount5[4],name:'本周合同-结束',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本月合同',
                        data: [

                          {value:result.amount5[5],name:'本月合同-已签订合同',label:labelHidden},
                          {value:result.amount5[6],name:'本月合同-已发货',label:labelHidden},
                          {value:result.amount5[7],name:'本月合同-已验收',label:labelCenter},
                          {value:result.amount5[8],name:'本月合同-已付款',label:labelHidden},
                          {value:result.amount5[9],name:'本月合同-结束',label:labelHidden},

                        ]
                    }, {
                        // 根据名字对应到相应的系列
                        name: '本季合同',
                        data: [

                          {value:result.amount5[10],name:'本季合同-已签订合同',label:labelHidden},
                          {value:result.amount5[11],name:'本季合同-已发货',label:labelHidden},
                          {value:result.amount5[12],name:'本季合同-已验收',label:labelCenter},
                          {value:result.amount5[13],name:'本季合同-已付款',label:labelHidden},
                          {value:result.amount5[14],name:'本季合同-结束',label:labelHidden},

                        ]
                    },]
                });
            },
            error: function() {
                alert("请求数据失败!");
            }
        });
        chartOne.on('click', function(params) {
            if (params.seriesIndex < 5) {
                window.location.href = "/activity/appointmentList?name=" + params.name;
            } else if (params.seriesIndex < 10) {
                window.location.href = "/activity/taskList?name=" + params.name;
            } else if (params.seriesIndex < 15) {
                window.location.href = "/opportunity/opportunityList?stage=" + params.name + "&status=" + params.seriesName.split("-")[1];
            }
        });
        window.onresize = function() {
            chartOne.resize();
        }
    </script>
</body>

</html>
